<template>
  <div class="comment-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table
        :data="articles"
        stripe
        class="table-data">
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="totalCommentCount"
          label="总评论数">
        </el-table-column>
        <el-table-column
          prop="fansCommentCount"
          label="粉丝评论数">
        </el-table-column>
        <el-table-column
          prop="commentStatus"
          label="状态">
          <template slot-scope="scope">
            <!--使用element的Tag标签组件美化状态列的展示-->
            {{ scope.row.commentStatus ? '正常' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.commentStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.statusDisabled"
              @change="onStatusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles, updateCommentStatus } from '@/api/article'

export default {
  name: 'CommentIndex',
  components: {},
  props: {},
  data () {
    return {
      articles: [], // 数据列表
      totalCount: 0, // 数据总条数
      pageSize: 10,
      page: 1 // 当前激活的页码
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadArticles()
  },
  mounted () {
  },
  methods: {
    handleSizeChange () {
      this.loadArticles(1)
    },
    handleCurrentChange () {
      this.loadArticles(this.page)
    },
    // 获取评论列表
    loadArticles (page = 1) {
      this.page = page
      getArticles({
        page,
        per_page: this.pageSize,
        response_type: 'comment'
      }).then(res => {
        const {
          results,
          total_count: totalCount
        } = res.data.data
        results.forEach(article => {
          article.statusDisabled = false
        })
        this.articles = results
        this.totalCount = totalCount
      })
    },

    // 打开或关闭评论
    onStatusChange (article) {
      // 引用评论开关
      article.statusDisabled = true
      updateCommentStatus(article.id, article.commentStatus).then(res => {
        // 启用评论开关
        article.statusDisabled = false
        this.$message({
          message: article.commentStatus ? '开启评论成功' : '关闭评论成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.table-data {
  margin-bottom: 20px;
}
</style>
